<template>
  <div>
    {{ crowdArr }}
    <h2>目标人群</h2>
    <el-table :data="crowdArr">
      <el-table-column label="人群名称">
        <template #default="scope">
          <div>
            <el-input v-model="scope.row.crowdName" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="目标量级">
        <template #default="scope">
          <div>
            <el-input v-model="scope.row.crowdSize"/>
          </div>
        </template>
      </el-table-column>
      </el-table>
      <div>
        <el-button @click="addCrowd">添加目标人群</el-button>
      </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const crowdArr = ref([])
//设置crowdArr的值
const setCrowdArr = (arr) => {
  crowdArr.value = arr
}
//暴露子组件的属性
defineExpose({
  crowdArr,
  setCrowdArr
})
const addCrowd = () => {
  crowdArr.value.push({
    crowdName:'',
    crowdSize:'',
  })
}
</script>

<style scoped>

</style>
